
<template>
	<view class="wanl-live-header">
		<view class="header-right round">
			<view class="header-image justify-center bg-white round align-center">
				<image class="header-image-img round" :src="stcOss(shopdata.avatar)"/>
			</view>
			<view class="header-shop">
				<text class="header-shop-text"> {{ formatEllipsis(shopdata.shopname, 16) }} </text>
				<view class="header-shop-info">
					<text class="header-shop-info-text">{{ numFormat(online) }} 人观看</text>
				</view>
			</view>
			<view class="header-btn" v-if="!isFollow" @tap="like()">
				<text class="header-btn-text">关注</text>
			</view>
		</view>
		<view class="header-left">
			<view class="wanl-btn" @tap="back()">
				<text class="wanl-btn-text">&#xe66b;</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "wanlLiveHeader",
		props: {
			online: {
				type: Number,
				default: 0
			},
			state: {
				default: 0
			},
			isFollow: {
				type: Boolean,
				default: true
			},
			shopdata: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		methods: {
			like() {
				this.$emit('change');
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			stcOss(url) {
				let oss = this.$store.state.common.appUrl.oss;
				let image = '';
				if (url) {
					if ((/^(http|https):\/\/.+/.test(url))) {
						image = url;
					} else {
						image = oss + url;
					}
				} else {
					image = oss + '/assets/addons/wanlshop/img/common/img_default3x.png';
				}
				return image;
			},
			numFormat(num) {
				return num > 9999 ? ((num - num % 1000) / 10000 + '万') : num
			},
			formatEllipsis(str = '', limitLen = 24) {
				let len = 0,
				reg = /[\x00-\xff]/, //半角字符的正则匹配
				strs = str.split(''),
				inx = strs.findIndex(s => {
					len += reg.test(s) ? 1 : 2
					if (len > limitLen) return true
				})
			    return inx === -1 ? str : str.substr(0, inx) + '...'
			}
		}
	}
</script>

<style>
	@import '@/static/style/wanlnvue.css';
	.wanl-live-header {
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		padding-top: 16rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;
		/* #ifdef MP */
		padding-right: 220rpx;
		/* #endif */
	}
		.header-right{
			align-items: center;
			flex-direction: row;
			background-color: rgba(0,0,0,.2);
			padding-top: 8rpx;
			padding-right: 16rpx;
			padding-bottom: 8rpx;
			padding-left: 8rpx;
		}
			.header-image{
				width: 68rpx;
				height: 68rpx;
			}
			.header-image-img{
				width: 68rpx;
				height: 68rpx;
			}
			.header-shop{
				padding-left: 15rpx;
			}
				.header-shop-text{
					color: rgba(255, 255, 255, .8);
					font-size: 28rpx;
					line-height: 36rpx;
				}
				.header-shop-info{
					
				}
				.header-shop-info-text{
					color: rgba(255, 255, 255, .7);
					font-size: 20rpx;
				}
			.header-btn{
				background: #f40;
				width: 86rpx;
				height: 50rpx;
				justify-content: center;
				align-items: center;
				border-radius: 18rpx;
				margin-left: 30rpx;
			}
				.header-btn-text{
					color: #fff;
					font-size: 24rpx;
				}
</style>
